<template>
    <div class="image-card">
        <div class="item" v-for="url in urls" :key="url">
            <img class="img"  v-lazy="url" >  
            <div class="img-info">
                <h3 class="img-name">动物大观园----猴子当大王</h3>
                <p class="img-time">上传时间： 2019-07-17</p>
                <p class="img-time">这是一段描述内容</p>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    name: 'imageCard',
    data: () => {
        return {
            arr: [0,1,2,3,4,5,6,7],
            urls: [   
                'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                "https://dummyimage.com/310x310",
                "https://dummyimage.com/420x410",
                "https://dummyimage.com/330x525",
                "https://dummyimage.com/350x310",
                'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
                'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
                "https://dummyimage.com/545x750",
                "https://dummyimage.com/500x470",
                "https://dummyimage.com/530x560",
                "https://dummyimage.com/450x120",
                'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
                "https://dummyimage.com/300x300",
                "https://dummyimage.com/600x400",
                "https://dummyimage.com/330x500",
                "https://dummyimage.com/350x600",
                "https://dummyimage.com/600x420",
                "https://dummyimage.com/400x600",
                "https://dummyimage.com/370x300",
                "https://dummyimage.com/300x400",
                "https://dummyimage.com/400x400",
                
            ],
            dafault: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }
    }
}
</script>

<style lang="scss" scoped>
.image-card {
    width: 100%;
    column-count: 4;
    column-width: calc(100% /4 );
    column-gap: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    .item {
        position: relative;
        margin-bottom: 10px;
        transition: all .5s;
        border-radius: 5px;
        overflow: hidden;
        .img-info {
            position: absolute;
            width: 100%;
            bottom: 0px;
            padding: 15px;
            background: rgba(0,0,0,0.5);
            color: #fff;
            opacity: 0;
            transition: all .3s;
            box-sizing: border-box;
            .img-name {
                font-size: 14px;
                color: #fff;
                margin: 0px 0 5px 0;
            }
            .img-time,
            .img-intro {
                font-size: 12px;
                color: #fff;
                margin: 0px;
            }
            .img-time {
                margin-bottom: 5px;
            }
        }
        .img {
            display: block;
            width: 100%;
            border: none;
            outline: none;
            border-radius: 5px;
        }
        &:hover {
                transform: scale(1.01);
                z-index: 9;
                .img-info {
                    opacity: 1;
                }
            }
    }
    
}


@media screen and (max-width: 1200px) {
    .image-card {
        width: 100%;
        column-count: 3;
        column-width: calc(100% /3 );
        column-gap: 15px;
        padding: 0 15px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 768px) {
    .image-card {
        width: 100%;
        column-count: 2;
        column-width: calc(100% /2 );
        column-gap: 10px;
        padding: 0 10px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 360px) {
    .image-card {
        width: 100%;
        column-count: 1;
        column-width: calc(100% /1 );
        column-gap: 10px;
        padding: 0 10px;
        box-sizing: border-box;
    }
}
</style>
